<template>
  <div class="industry">
    <TitleLable label="行业分布">
      <template #right>
        <div class="underline" @click="goTo">模型集市</div>
      </template>
    </TitleLable>
    <div class="nav-list">
      <Tabs :list="navList" :current="current" @change="change" />
    </div>
    <div class="table-box">
      <el-row class="head">
        <el-col :span="13"><div>数量</div></el-col>
        <el-col :span="zczeSpan"><div>资产总额</div></el-col>
        <el-col :span="6" v-if="current === 0"><div>利润总额</div></el-col>
      </el-row>
      <el-row class="body" v-for="(item, index) in tableData" :key="index">
        <el-col :span="7">
          <div>{{ item.name }}</div>
        </el-col>
        <el-col :span="6">
          <div v-if="item.num">
            <span class="blue">{{ item.num }}</span> 个 &nbsp;
            <span class="blue">{{ item.rate }}</span>
            %
          </div>
          <div v-else>-</div>
        </el-col>
        <el-col :span="zczeSpan">
          <div v-if="item.total">
            <span class="blue">{{ item.total }}</span> {{ item.unit }}
          </div>
          <div v-else>-</div>
        </el-col>
        <el-col :span="6" v-if="current === 0">
          <div v-if="item.profitTotal">
            <span class="blue">{{ item.profitTotal }}</span>
            亿
          </div>
          <div v-else>-</div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import TitleLable from "../TitleLable/index.vue";
import Tabs from "../Tabs/index.vue";

export default {
  name: "Industry",
  components: { TitleLable, Tabs },
  data() {
    return {
      current: 0,
      navList: ["已投", "在投"],
      tableData: [
        {
          name: "总计",
          num: 17,
          rate: "30.00",
          total: undefined,
          profitTotal: undefined,
          unit: "亿",
        },
        {
          name: "装备制造业",
          num: 8,
          rate: 47.06,
          total: undefined,
          profitTotal: undefined,
          unit: "亿",
        },
        {
          name: "交通关联产业",
          num: 5,
          rate: 29.41,
          total: undefined,
          profitTotal: undefined,
          unit: "亿",
        },
        {
          name: "金融及其他",
          num: 4,
          rate: 23.53,
          total: undefined,
          profitTotal: undefined,
          unit: "%",
        },
        {
          name: "-",
          num: undefined,
          rate: undefined,
          total: undefined,
          profitTotal: undefined,
          unit: "亿",
        },
        {
          name: "-",
          num: undefined,
          rate: undefined,
          total: undefined,
          profitTotal: undefined,
          unit: "亿",
        },
      ],
    };
  },
  computed: {
    zczeSpan: function () {
      const current = this.current;
      if (current) {
        return 11;
      }
      return 5;
    },
  },
  methods: {
    change(val) {
      this.current = val;
    },
    goTo() {
      this.$message("进入平台：模型集市");
    },
  },
};
</script>

<style lang="scss" scoped>
.industry {
  .nav-list {
    display: flex;
    flex-direction: row-reverse;
    margin: 12px 20px;
  }
}
</style>
